<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item :label="`${$t('common.belong_merchant')}:`">
						<merchant-select
							v-model="queryData.merchantId"
							:merchantInfo.sync="merchantObj"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.commission_month'
							)}:`
						"
						prop="registerTime"
					>
						<el-date-picker
							v-model="startMonth"
							type="monthrange"
							range-separator="-"
							:clearable="false"
							:start-placeholder="
								$t(
									'funds.proxy_member_funds_record.start_month'
								)
							"
							:end-placeholder="
								$t('funds.proxy_member_funds_record.end_month')
							"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.top_proxy_name'
							)}:`
						"
						prop="proxyName"
					>
						<el-input
							v-model="queryData.proxyName"
							size="medium"
							:placeholder="$t('common.please_enter')"
							clearable
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.order_no')}:`"
						prop="orderNo"
					>
						<el-input
							v-model="queryData.orderNo"
							size="medium"
							:placeholder="$t('common.please_enter')"
							clearable
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.client_state'
							)}:`
						"
					>
						<el-select
							v-model="queryData.payoutStatus"
							size="medium"
							:placeholder="$t('common.select_all')"
							clearable
						>
							<el-option
								v-for="item in proxyPayoutStatus"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.team_commission_amount'
							)}:`
						"
						class="numberBox"
					>
						<el-input-number
							v-model="queryData.commissionAmountMin"
							size="medium"
							:placeholder="$t('common.minimum')"
							style="width: 100px"
							:min="0"
							:precision="0"
							:controls="false"
							name="commissionAmountMin"
							@blur="
								handleAmount(
									queryData,
									1,
									'commissionAmountMin',
									'commissionAmountMax',
									$t(
										'funds.proxy_member_funds_record.form_search_tip13'
									)
								)
							"
						></el-input-number>
						-
						<el-input-number
							v-model="queryData.commissionAmountMax"
							size="medium"
							:placeholder="$t('common.maximum')"
							style="width: 100px"
							:min="0"
							:precision="0"
							:controls="false"
							name="commissionAmountMax"
							@blur="
								handleAmount(
									queryData,
									2,
									'commissionAmountMin',
									'commissionAmountMax',
									$t(
										'funds.proxy_member_funds_record.form_search_tip14'
									)
								)
							"
						></el-input-number>
					</el-form-item>

					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('405081')"
							type="warning"
							icon="el-icon-download"
							size="medium"
							:disabled="loading"
							@click="handleExportExcel"
						>
							{{ $t('common.export') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>

			<div class="content">
				<el-table
					ref="tables"
					v-loading="loading"
					border
					size="mini"
					show-summary
					:data="tableData"
					style="width: 100%"
					class="small-size-table"
					:header-cell-style="getRowClass"
					element-loading-spinner="el-icon-loading"
					:summary-method="
						(val) => handleRow(val, subSummary, totalSummary)
					"
				>
					<el-table-column
						prop="orderNo"
						align="center"
						:label="$t('funds.order_no')"
						min-width="180"
					></el-table-column>
					<el-table-column
						prop="reportYm"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.commission_month'
							)
						"
						min-width="100"
					></el-table-column>
					<el-table-column
						prop="payoutStatus"
						align="center"
						:label="
							$t('funds.proxy_member_funds_record.client_state')
						"
						min-width="100"
					>
						<template slot-scope="scope">
							{{
								typeFilter(
									scope.row.payoutStatus,
									'proxyPayoutStatus'
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="proxyAccount"
						align="center"
						:label="
							$t('funds.proxy_member_funds_record.top_proxy_name')
						"
						min-width="100"
					></el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
						min-width="100"
					>
						<template slot-scope="scope">
							{{ scope.row.merchantName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="accountStatus"
						align="center"
						:label="$t('common.account_status')"
						min-width="100"
					>
						<template slot-scope="scope">
							<span
								v-if="
									scope.row.loginLockStatus === 0 &&
										scope.row.accountLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
							<span
								v-if="scope.row.loginLockStatus === 1"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
							</span>
							<span
								v-if="scope.row.accountLockStatus === 1"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="totalPersonCommissionAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_person_commission_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalPersonCommissionAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalChildCommissionAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_child_commission_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalChildCommissionAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="commissionAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.team_commission_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.commissionAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="adjustCommissionAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.commission_add_and_subtract'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.adjustCommissionAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="commissionOnlyAmount"
						align="center"
						min-width="150"
						:label="
							$t(
								'funds.proxy_member_funds_record.commission_only_amount'
							)
						"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.commissionOnlyAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="commissionRate"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.commission_rate'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handlePercentage(scope.row.commissionRate) }}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalRushAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_rush_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalRushAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalLastAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_last_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalLastAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalPureAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_pure_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalPureAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalNetAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_net_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalNetAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalPlatformAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_platform_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalPlatformAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalRebateAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_rebate_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalRebateAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalDiscountAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_discount_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalDiscountAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalProxyRebateAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_proxy_rebate_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalProxyRebateAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalAdjustAmount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.total_adjust_amount'
							)
						"
						min-width="150"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalAdjustAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="audit1Desc"
						align="center"
						:label="$t('common.remark')"
						min-width="150"
					>
						<template slot-scope="scope">
							{{
								scope.row.audit1Desc
									? `${$t(
											'funds.proxy_member_funds_record.frirst_audit'
									  )}：${scope.row.audit1Desc}`
									: '-'
							}}
							<br v-show="scope.row.audit2Operator" />
							{{
								scope.row.audit2Desc
									? `${$t(
											'funds.proxy_member_funds_record.second_audit'
									  )}：${scope.row.audit2Desc}`
									: '-'
							}}
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					class="pageValue"
					:current-page.sync="pageNum"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="$store.getters.pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
const start = dayjs()
	.startOf('month')
	.subtract(1, 'month')
const end = dayjs()
	.subtract(1, 'month')
	.endOf('month')
export default {
	name: routerNames.superAgentCommissionRecord,
	mixins: [list, summaryList],
	data() {
		return {
			queryData: {},
			startMonth: [start, end],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			merchantObj: ''
		}
	},
	computed: {
		proxyPayoutStatus() {
			return this.globalDics.proxyPayoutStatus || []
		}
	},
	created() {},
	mounted() {},
	methods: {
		loadData() {
			this.loading = true
			const month = this.startMonth || []
			const params = {
				...this.queryData,
				startMonth: dayjs(month[0]).format('YYYYMM'),
				endMonth: dayjs(month[1]).format('YYYYMM'),
				...this.getParams()
			}
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getGeneralProxyCommissionList(params)
				.then((res) => {
					const { record, totalRecord, summary } = res.data || {}
					this.tableData = record || []
					this.total = totalRecord || 0
					this.subSummary = summary || {}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
			this.$api
				.getGeneralProxyCommissionSummary(params)
				.then((res) => {
					this.totalSummary = res.data || {}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},

		reset() {
			this.queryData = {}
			this.merchantObj = ''
			this.startMonth = [start, end]
			this.pageNum = 1
			this.loadData()
		},
		handleExportExcel() {
			const month = this.startMonth || []
			const params = {
				...this.queryData,
				startMonth: dayjs(month[0]).format('YYYYMM'),
				endMonth: dayjs(month[1]).format('YYYYMM')
			}
			this.exportExcel(params)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
